<template>
	<view class="d-kuan d-vip-kuan" :style="{marginBottom: gao+'rpx', bottom: 'var(--window-bottom)'}" >
		<!-- :style="{marginBottom: gao+'rpx'}"-->
		
		
		<view class="d-kuan-juzhong ">
			<view class="d-kuan ">
				<uv-row customStyle="margin-top: 0px" :gutter="10">
					<!-- #ifndef MP-WEIXIN -->
						<uv-col span="2" class="pc-yincang"></uv-col>
						<!-- #endif -->
					<uv-col :span="kuan_shu">
						<view class="d-vip-kuan-20">
							<uni-goods-nav :fill="true" :options="options" :button-group="fujian_goumai" @click="onClick"
								@buttonClick="buttonClick" />
						</view>
					</uv-col>
					<!-- #ifndef MP-WEIXIN -->
					<uv-col span="3" class="pc-yincang"></uv-col>
					<!-- #endif -->
				</uv-row>
			</view>
		</view>
		<uv-popup ref="jieshao" @change="jieshao" zIndex="2000" bgColor="none"  custom-style="height: 1000rpx;">
			<view class="d-kuan-juzhong ">
				<view class="d-kuan ">
					<uv-row customStyle="margin-top: 0px" :gutter="10">
						<uv-col @click="closeVip" span="2" class="pc-yincang"></uv-col>
						<uv-col :span="kuan_shu">
							<view class="d-vip-kuan-20 d-beijing-baise" :style="{borderRadius: '10px 10px 0 0',height: '1000rpx',marginBottom: jieshao_gao+'rpx'}">
								
								<view class="d-neikuang-40 d-you-shang">
									
									<view class="d-clear"></view>

									<scroll-view scroll-y class="d-kuan" :style="{height: neirong_gao+'rpx',lineHeight: '1.6'}">
										<view class="d-kuan d-juzhong d-xia-10">
											<image class="" :style="{width: '300rpx', height: '100rpx', display: 'block'}" 
											:src="wwwdata && wwwdata.setting && wwwdata.setting.config && wwwdata.setting.config.logo" mode="aspectFit"
											>
											</image>
										</view>
										<uv-parse :content="wwwdata && wwwdata.setting && wwwdata.setting.quan_jieshao" :lazy-load="true" :selectable="true"></uv-parse>
								        
									</scroll-view>
									<view class="vip-close " @click="closeVip">
									    <uv-icon name="close" color="#f56e00" size="18"></uv-icon>
									</view>
								</view>
								
							</view>
						</uv-col>
						<uv-col @click="closeVip" span="3" class="pc-yincang"></uv-col>
					</uv-row>
				</view>
			</view>
			
		</uv-popup>
		<uv-popup ref="kefu" @change="jieshao" zIndex="2000" bgColor="none"  custom-style="height: 1000rpx;">
			<view class="d-kuan-juzhong ">
				<view class="d-kuan ">
					<uv-row customStyle="margin-top: 0px" :gutter="10">
						<uv-col @click="closekefu" span="2" class="pc-yincang"></uv-col>
						<uv-col :span="kuan_shu">
							<view class="d-vip-kuan-20 d-beijing-baise" :style="{borderRadius: '10px 10px 0 0',height: '1000rpx',marginBottom: jieshao_gao+'rpx'}">
								
								<view class="d-neikuang-40 d-you-shang">
									
									
									
									<view class="d-clear"></view>
									<scroll-view scroll-y class="d-kuan" :style="{height: neirong_gao+'rpx',lineHeight: '1.6'}">
										<view class="d-kuan d-juzhong d-jiacu d-shangxia-10">联系微信</view>
										<view class="d-kuan d-juzhong">
											<image class="" :style="{width: '300rpx', height: '300rpx', display: 'block'}" 
										:src="wwwdata && wwwdata.setting && wwwdata.setting.quan_erweima" mode="aspectFit"
										>
								    	</image>
										
										
										</view>
										<uv-cell-group class="d-clear d-shang-20">
											<uv-cell v-if="wwwdata && wwwdata.setting && wwwdata.setting.quan_weixin" icon="weixin-fill" title="微信号：">
												<!-- 自定义右侧值 -->
												<template v-slot:value>
													<text>{{ wwwdata && wwwdata.setting && wwwdata.setting.quan_weixin }}</text>
												</template>
											</uv-cell>
											<uv-cell v-if="wwwdata && wwwdata.setting && wwwdata.setting.quan_haoma" icon="phone-fill" title="联系电话：">
												<!-- 自定义右侧值 -->
												<template v-slot:value>
													<text>{{ wwwdata && wwwdata.setting && wwwdata.setting.quan_haoma }}</text>
												</template>
											</uv-cell>
											<uv-cell v-if="wwwdata && wwwdata.setting && wwwdata.setting.quan_lianxi_shuoming" icon="edit-pen-fill" title="联系备注：">
												<!-- 自定义右侧值 -->
												<template v-slot:value>
													<text>{{ wwwdata && wwwdata.setting && wwwdata.setting.quan_lianxi_shuoming }}</text>
												</template>
											</uv-cell>
										</uv-cell-group>

										
										<view class="d-kuan d-shang-20 d-clear">
											<view class="d-kuan d-juzhong d-jiacu d-shangxia-10">会员套餐</view>
											<uv-cell-group class="d-clear d-shang-20" >
												<uv-cell @click="huiyuanvip()" v-for="(list,index) in wwwdata && wwwdata.setting && wwwdata.setting.quan_yonghuzu"  :key="index"  icon="integral-fill" :title="list.name">
													<!-- 自定义右侧值 -->
													<template v-slot:value>
														<text>{{ list.price }} 元 / {{ list.days }} 天</text>
													</template>
												</uv-cell>
												
											</uv-cell-group>
											
										</view>
										<view class="d-kuan d-shang-20 d-clear">
											<view class="d-kuan d-juzhong d-jiacu d-shangxia-10">套餐说明</view>
											<uv-parse :content="wwwdata && wwwdata.setting && wwwdata.setting.quan_taocan_shuoming" :lazy-load="true" :selectable="true"></uv-parse>

										</view>
										
										
										
									</scroll-view>
									<view class="vip-close " @click="closekefu">
									    <uv-icon name="close" color="#f56e00" size="18"></uv-icon>
									</view>
								</view>
								
							</view>
						</uv-col>
						<uv-col @click="closekefu" span="3" class="pc-yincang"></uv-col>
					</uv-row>
				</view>
			</view>
			
		</uv-popup>
	</view>
</template>

<script>
export default {
	props: {
		kuan_shu: {
			type: Number,
			default: 0
		},
		wwwdata: {
			type: Object,
			default: () => {}
		},
		dingzhi: {
			type: Number,
			default: 0
		},
		gao_data: {
			type: Number,
			default: 0
		},
	},
	data() {
	return {
		fujian_goumai: [
			{
				text: '',
				backgroundColor: 'linear-gradient(90deg, #02ba9b, #04b19a)',
				color: '#fff'
			},
			{
				text: '立即加入',
				backgroundColor: 'linear-gradient(90deg, #0c988f, #7e1275)',
				color: '#fff'
			}
		],
		gao: 50, // 增加到底部tab栏高度的2倍左右，确保不被遮挡
	    jieshao_gao: 140,
		neirong_gao: 780
	};
},
computed: {
	options() {
		// 基础选项
		const baseOptions = [
			{
				icon: 'chat',
				text: '客服'
			},
			{
				icon: 'shop',
				text: '介绍',
				info: 0,
				infoBackgroundColor: '#007aff',
				infoColor: "#f5f5f5"
			}
		];
		
		// 根据dingzhi的值决定是否添加功能选项
		if (this.dingzhi == 1) {
			baseOptions.push({
				icon: 'folder-add',
				text: '功能',
				info: 0,
				infoBackgroundColor: '#007aff',
				infoColor: "#f5f5f5"
			});
		}
		
		return baseOptions;
	}
},
	mounted() {
		// 组件挂载后尝试设置一次文案，保证初次渲染可见
		this.jiage();
	},
	watch: {
		// 根据 gao_data 动态设置底部高度 gao
		gao_data: {
			immediate: true,
			handler(val) {
				if (val === 0) {
					// h5 模式下，底部高度为0
					const ua = navigator.userAgent;
					if (ua.includes('iPhone') || ua.includes('iPad') || ua.includes('iPod')) {
						// iOS系统设置为140
						this.gao = 0;
					} else if (ua.includes('HarmonyOS') || ua.includes('Harmony')) {
						// 鸿蒙系统设置为150
						this.gao = -50;
					} else {
						// 其他系统保持默认值
						this.gao = 0;
					}
					
					this.jieshao_gao = 0;
					this.neirong_gao = 890;
					
				} else if (val === 1) {
					// gao_data=1时，使用kuan_shu对应的变化值
				    this.updateGaoByKuanShu(this.kuan_shu);
				}
			}
		},
		// 根据 kuan_shu 动态设置底部高度 gao
		kuan_shu: {
			immediate: true,
			handler(val) {
				// 只有当gao_data=1时才更新高度，gao_data=0 时保持不变
				if (this.gao_data == 1) {
					this.updateGaoByKuanShu(val);
				}
			}
		},
		// 用户组价格列表变化时，自动设置购买按钮的价格文本
		yonghuzuList: {
			immediate: true,
			handler(list) {
				if (Array.isArray(list) && list.length > 0) {
					const first = list[0];
					this.fujian_goumai[0].text = `${first.price} 元 / ${first.days} 天`;
					console.log('yonghuzuList 设置价格:', this.fujian_goumai[0].text);
				} else {
					// 无用户组数据时的默认文案
					this.fujian_goumai[0].text = '查看费用';
					//console.log('yonghuzuList 空，使用默认文案:', this.fujian_goumai[0].text);
				}
			}
		},
		// 监听 wwwdata 深度变化，数据就绪时填充一次文案
		wwwdata: {
			deep: true,
			immediate: true,
			handler() {
				this.jiage();
			}
		}
		},
		methods: {
			// 根据kuan_shu更新高度
		updateGaoByKuanShu(val) {
			if (val === 12) {
				// #ifdef H5
				// 在H5平台下根据系统类型设置不同高度
				const ua = navigator.userAgent;
				if (ua.includes('iPhone') || ua.includes('iPad') || ua.includes('iPod')) {
					// iOS系统设置为140
					this.gao = 0;
				} else if (ua.includes('HarmonyOS') || ua.includes('Harmony')) {
					// 鸿蒙系统设置为150
					this.gao = 0;
				} else {
					// 其他系统保持默认值
					this.gao = 0;
				}
				this.jieshao_gao = 100;
				this.neirong_gao = 780;
				// #endif
				// #ifdef APP
				// 原生App平台（包括苹果）增加额外高度以适配底部tab
				this.gao = 0;
				this.jieshao_gao = 100;
				this.neirong_gao = 780;
				// #endif
				// #ifdef APP-HARMONY
				// 鸿蒙App平台使用固定值适配底部tab
				this.gao = 0;
				this.jieshao_gao = 100;
				this.neirong_gao = 780;
				// #endif
				// #ifdef MP-WEIXIN
				this.gao = 0;
				this.jieshao_gao = 50;
				this.neirong_gao = 780;
				// #endif
			} else if (val === 7) {
				this.jieshao_gao = 70;
				// #ifdef H5
				this.gao = -50;
				// #endif
				// #ifdef APP
				this.gao = 180;
				// #endif
				// #ifdef APP-HARMONY
				this.gao = 120;
				// #endif
				// #ifdef MP-WEIXIN
				this.gao = 0;
				// #endif
				this.neirong_gao = 880;
			} else {
				// 其他值默认使用 30
				this.jieshao_gao = 70;
				// #ifdef H5
				this.gao = -50;
				// #endif
				// #ifdef APP
				this.gao = 180;
				// #endif
				// #ifdef APP-HARMONY
				this.gao = 120;
				// #endif
				// #ifdef MP-WEIXIN
				this.gao = 0;
				// #endif
				this.neirong_gao = 780;
			}
			},
		
		onClick(e){
			console.log('点击1：',e)
			if(e.index==0){
				this.$refs.kefu.open('bottom');
			}
			if(e.index==1){
				this.$refs.jieshao.open('bottom');
			}
			if(e.index==2){
				
				// 跳转到功能介绍页面
				uni.navigateTo({
					url: '/pages/gongneng/gongneng?id=1'
				});
			}
		},
		buttonClick(e){
			// 跳转到用户组购买页面
			var pc = this.$store.state.kuan.pc;
			let uid = this.$store.state.memberuid;
			let code = this.$store.state.keycode;
			if (!uid) {
			    uni.showToast({
			        title: '未登录',
			        icon: 'none'
			    });
				var denglu_xianshi_weibu = 1;
				this.$emit('denglu',1);
			    return;
			} else {
				uni.navigateTo({
					url: '/pages/u/vip'
				});
			}
			/*uni.navigateTo({
				url: '/pages/u/vip'
			});*/
		},
		huiyuanvip(){
			// 跳转到用户组购买页面
			/*uni.navigateTo({
				url: '/pages/u/vip'
			});*/
		},
		
		closeVip() {
			console.log('关闭弹窗');
			this.$refs.jieshao.close('bottom');
		},
		closekefu() {
			console.log('关闭弹窗');
			this.$refs.kefu.close('bottom');
		},
		jieshao() {
			console.log('关闭弹窗');
			
		},
		jiage(){
			// 过滤开启的用户组并取第一条（支持数组或对象）
			const setting = this.wwwdata && this.wwwdata.setting && this.wwwdata.setting.quan_yonghuzu;
			const listAll = Array.isArray(setting)
				? setting
				: (setting && typeof setting === 'object' ? Object.values(setting) : []);
			const list = listAll.filter(item => item && item.kai == 1);
			if (list.length > 0) {
				const first = list[0];
				this.fujian_goumai[0].text = `${first.price} 元`;
				//console.log('jiage 设置价格:', this.fujian_goumai[0].text);
			} else {
				// 无用户组数据时的默认文案
				this.fujian_goumai[0].text = '查看费用';
				//console.log('jiage 空，使用默认文案:');
			}
		}
	}
}
</script>

<style>
.d-vip-kuan {
	position: fixed;
	/*margin-bottom: 90rpx;*/
	
	/*bottom: 0;*/
	left: 0;
	right: 0;
	
	padding-top: 8rpx;
	padding-bottom: 0rpx;
	z-index: 800;
	background-color: #ffffff; /* 可根据需要调整背景色 */
	box-sizing: border-box;
	/* #ifdef MP-WEIXIN */
	
	/* 微信小程序平台适配底部安全区域 */
	padding-bottom: env(safe-area-inset-bottom, 0rpx);
	height: calc(50rpx + env(safe-area-inset-bottom, 0rpx));
	/* #endif */
}
.d-vip-kuan-20 {
	margin-left: 10px;
	margin-right: 10px;
}
/* 仅在 d-vip 组件范围内让内容容器成为定位上下文 */
.d-you-shang {
	/*position: relative;*/
}
.vip-close {
	/*position: absolute;*/ /* 固定在容器内 */
	margin-bottom: 10px;
	top: auto; /* 取消顶部定位 */
	top: 0px; /* 放到 d-you-shang 的最下方 */
	right: 0; /* 仍靠右对齐，如需居中可改为 left/right 调整 */
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	color: #f53a3a;
	background-color: rgba(245,245,245,0.9);
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}
</style>
